<template>

    <div class="OutlineTreeItem">
        <div class="DragBox" v-if="isDragUp" :style="{
            marginLeft: LevelLeft + 24 + 'px',
            borderColor: token.colorPrimaryHover,
        }"></div>
        <div class="OutlineTreeName" :style="{
            paddingLeft: LevelLeft + 'px',
            background: Active ? token.colorPrimaryBg : (HoverState ? token.colorFillSecondary : ''),
            color: Active ? token.colorPrimary : token.colorTextSecondary
        }" @mouseenter="() => { HoverState = true }" @mouseleave="() => { HoverState = false }" @click="ClickEvent">
            <div class="Switch C-Icon" :class="SwitchData ? 'open' : ''" @click.stop="SwitchData = !SwitchData">
                <span v-if="props.config.slots">&#xe67f;</span>
            </div>
            <div class="Icon C-Icon" v-html="Icon"></div>
            <div class="Text">{{ title }}</div>
        </div>

        <div class="OutlineTreeContent" :style="{ height: 0 }" ref="ChildBox" v-if="props.config.slots">
            <div class="line" :style="{
                left: LevelLeft + 9 + 'px',
                background: Active ? token.colorPrimaryBorderHover : token.colorTextQuaternary
            }"></div>
            <template v-for="item in props.config.slots">
                <OutlineTreeItem v-for="child in item" :config="child" :key="child.field" :level="level + 1"
                    @OpenFilder="OpenFilder" />
            </template>
            <div class="DragBox" v-if="isDragIn" :style="{
                marginLeft: (level + 2) * (token.paddingXS + 4) + 24 + 'px',
                borderColor: token.colorPrimaryHover,
            }"></div>

        </div>
        <div class="DragBox" v-if="isDragDown" :style="{
            marginLeft: LevelLeft + 24 + 'px',
            borderColor: token.colorPrimaryHover,
        }"></div>
    </div>
</template>

<script setup>
import { computed, inject, ref, watch, nextTick } from "vue";
import OutlineTreeItem from "./OutlineTreeItem.vue";
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();
const StateEvent = inject('StateEvent');
const props = defineProps(['config', 'level']);
const HoverState = ref(false);

const emit = defineEmits(['OpenFilder'])


const LevelLeft = computed(() => {
    return (props.level + 1) * (token.value.paddingXS + 4)
})



const Active = computed(() => {
    if (props.config.field == StateEvent.ActiveId.value) {
        emit('OpenFilder')
        SwitchData.value = true;
        nextTick(() => {
            ChildBox.value && (ChildBox.value.style.height = 'auto')
        })
        return true;
    } else {
        return false
    }
});

const OpenFilder = function () {
    emit('OpenFilder')
    nextTick(() => {
        ChildBox.value && (ChildBox.value.style.height = 'auto')
    })
    SwitchData.value = true
}

const ClickEvent = function () {
    StateEvent.ActiveId.value = props.config.field;
}


const RuleConfig = computed(() => StateEvent.GetRuleConfigById(props.config.field))
const Icon = computed(() => RuleConfig.value.icon)
const title = computed(() => {
    if (props.config.title) {
        return props.config.title;
    } else {
        return RuleConfig.value.name
    };
})

const SwitchData = ref(false);
const ChildBox = ref();
watch(SwitchData, value => {
    if (!ChildBox.value) return;
    if (value) {
        ChildBox.value.style.height = ChildBox.value.scrollHeight + 'px';
        setTimeout(() => {
            ChildBox.value.style.height = 'auto'
        }, 200)
    } else {
        ChildBox.value.style.height = ChildBox.value.scrollHeight + 'px';
        setTimeout(() => {
            ChildBox.value.style.height = '0px'
        }, 1)
    }
});


watch(() => StateEvent.IndicateId.value, val => {
    if (val == props.config.field) {
        SwitchData.value = true;
        emit('OpenFilder')
        nextTick(() => {
            ChildBox.value && (ChildBox.value.style.height = 'auto')
        })
    }
})


const isDragUp = computed(() => {
    return (RuleConfig.DragType != 'OnlyIn'
        && StateEvent.IndicateRect.value
        && (StateEvent.IndicateType.value == 'UP' || StateEvent.IndicateType.value == 'LEFT')
        && StateEvent.IndicateId.value == props.config.field)
})

const isDragDown = computed(() => {
    return (RuleConfig.DragType != 'OnlyIn'
        && StateEvent.IndicateRect.value
        && (StateEvent.IndicateType.value == 'DOWN' || StateEvent.IndicateType.value == 'RIGHT')
        && StateEvent.IndicateId.value == props.config.field)
})

const isDragIn = computed(() => {
    return (RuleConfig.DragType != 'Ele'
        && StateEvent.IndicateRect.value
        && (StateEvent.IndicateType.value == 'IN')
        && StateEvent.IndicateId.value == props.config.field)
})
</script>

<style lang="less" scoped>
.DragBox {
    // position: absolute;
    height: 32px;
    border: 1px dashed;
}

.OutlineTreeName {
    display: flex;
    cursor: pointer;
    padding: 6px 0;
    min-height: 20px;
    align-items: center;

    .Icon {
        flex: none;
        width: 28px;
        text-align: center;
        display: flex;
        padding: 0 3px;
    }

    .Switch {
        flex: none;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        transition: all 0.3s;
        font-size: 12px;

        &.open {
            transform: rotateZ(90deg);
        }
    }
}

.OutlineTreeContent {
    overflow: hidden;
    transition: height 0.2s;
    position: relative;

    >.line {
        top: 4px;
        bottom: 4px;
        width: 1px;
        position: absolute;
        z-index: 9;
    }
}
</style>